<template>
	<view>
		<input v-model="form.cardNo" class="num-input" type="number" placeholder="请输入本人的银行卡卡号" />
		<view class="cell u-flex u-border-bottom">
			<text class="u-font-30">持卡人</text>
			<input v-model="form.name" class="input" type="text" placeholder="请输入持卡人姓名" />
		</view>
		<view class="cell u-flex u-border-bottom">
			<text class="u-font-30">身份证号</text>
			<!-- #ifdef MP -->
			<input v-model="form.idCardNum" class="input" maxlength="18" type="idcard" placeholder="请输入您的身份证号" />
			<!-- #endif -->
			<!-- #ifndef MP -->
			<input @click="showKeyboard=true" v-model="form.idCardNum" class="input" maxlength="18" type="text"
				placeholder="请输入您的身份证号" disabled />
			<!-- #endif -->
		</view>
		<view class="cell u-flex u-border-bottom">
			<text class="u-font-30">手机号</text>
			<input v-model="form.tel" maxlength="11" class="input" type="number" placeholder="请输入银行预留手机号" />
			<image @click="showTips=true" src="../static/icon-tips.png"
				style="width: 40rpx;height: 40rpx;margin-left: 16rpx;"></image>
		</view>

		<button @click="submit" :disabled="!disabled" class="btn-binding" :class="{disabled: !disabled}">绑定银行卡</button>

		<u-keyboard @change="change" @backspace="backspace" mode="card" v-model="showKeyboard" :tooltip="false"
			:mask="false">
		</u-keyboard>
		<u-modal v-model="showTips" title="手机号说明" content="银行预留手机号是你在办理该银行卡时所填写的手机号。没有预留、手机号忘记或者已停用，请联系银行客服处理。"
			confirmText="我知道了" confirm-color="#999">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					cardNo: '',
					name: '',
					idCardNum: '',
					tel: ''
				},
				showKeyboard: false,
				showTips: false,
				userinfo: JSON.parse(uni.getStorageSync('userinfo'))
			};
		},
		computed: {
			disabled() {
				let disabled = true
				for (let key in this.form) {
					if (!this.form[key]) {
						disabled = false
						return
					}
				}
				console.log(disabled)
				return disabled
			}
		},
		methods: {
			async submit() {
				if (!this.$u.test.mobile(this.form.tel)) {
					return uni.showToast({ title: '手机号格式不正确' })
				}
				let params = { ormtb410id: this.userinfo.ORMTB410ID, ...this.form }
				uni.showLoading({ title: '请稍候...', mask: true })
				let [err,res] = await uni.request({
					url: this.baseUrl + '/web/bank/submit',
					method: 'POST',
					dataType: 'json',
					data: params
				})
				uni.hideLoading()
				console.log(res)
				if (res.data.code === 0) {
					let phone = this.form.tel
					uni.redirectTo({ url: `/pages/wallet/bank-code/bank-code?phone=${phone}` })
				}
				else{
					uni.showToast({ title: res.data.msg })
				}
			},
			change(e) {
				if (this.form.idCardNum.length >= 18) return
				this.form.idCardNum += e
			},
			backspace() {
				let value = this.form.idCardNum
				if (value.length) this.form.idCardNum = value.substr(0, value.length - 1);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.num-input {
		height: 112rpx;
		border-radius: 8rpx;
		border: 2rpx solid #333333;
		padding: 0 32rpx;
		margin: 64rpx 32rpx 32rpx;
	}

	.cell {
		height: 106rpx;
		margin: 0 32rpx;
		margin-bottom: 32rpx;

		.input {
			flex: 1;
			height: 106rpx;
			text-align: right;
		}

		.input-placeholder {
			font-size: 30rpx;
			color: #999999;
		}
	}

	.btn-binding {
		background: linear-gradient(136deg, #FFD902 0%, #FFB201 100%);
		border-radius: 8rpx;
		margin: 250rpx 32rpx 32rpx 32rpx;
		font-size: 34rpx;
		font-weight: 600;
	}

	.btn-binding.disabled {
		background: #F0F0F0;
	}
</style>
